.JsonTextA01 {
	padding: 16px;
	background: #0b516f;

	& > div {
		margin-bottom: 8px;

		& > span {
			font-size: 14px;
			font-family: MicrosoftYaHei;
			font-weight: bold;
			color: #ffffff;

			&:first-child {
				margin-right: 8px;
			}
		}
	}
}

.JsonTextA02 {
	width: 100%;
	height: 100%;
	padding: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;

	overflow-y: scroll;

	& > div {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-direction: column;
		margin: 16px 0;

		&:nth-child(1),
		&:nth-child(2) {
			width: 45%;

			& > div:last-child {
				height: 300px;
			}
		}

		& > div:first-child {
			font-size: 18px;
			font-family: MicrosoftYaHei;
			font-weight: bold;
			color: #ffeb63;
			margin-bottom: 8px;
		}

		& > div:last-child {
			white-space: pre-line;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			font-size: 14px;
			line-height: 30px;
			font-family: ShuHeiTi;
			font-weight: bold;
			color: #ffffff;
			background: rgba(0, 133, 158, 0.2);
			padding: 30px;
		}
	}
}

.JsonTextA03 {
	width: 100%;
	height: 100%;
	padding: 16px;

	& > .Box {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		border: 2px solid #00b0d5;
		overflow: hidden;

		& > .Top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 64px;

			& > div {
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #003753;
				border-bottom: 2px solid #000;
				border-right: 2px solid #000;
				font-size: 14px;
				font-family: ShuHeiTi;
				font-weight: bold;
				color: #ffffff;
				padding: 0 16px;

				&:last-child {
					border-right: none;
				}
			}
		}

		& > .List {
			width: 100%;
			flex: 1;
			overflow-y: scroll;

			&::-webkit-scrollbar {
				display: none;
			}

			& > div {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 160px;
				border-bottom: 2px solid #000;

				&:last-child {
					border: none;
				}

				& > div {
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					border-right: 2px solid #000;
					font-size: 14px;
					font-family: ShuHeiTi;
					font-weight: bold;
					color: #ffffff;
					padding: 0 16px;
					line-height: 24px;

					&:last-child {
						border: none;
					}
				}
			}
		}
	}
}

.JsonTextA04 {
	width: 100%;
	height: 100%;
	padding: 16px;

	& > div {
		& > span {
			line-height: 36px;
			font-size: 14px;
			font-family: ShuHeiTi;
			font-weight: bold;
			color: #ffffff;

			&:first-child {
				margin-right: 8px;
			}
		}
	}
}

.JsonTextA05 {
	padding: 16px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	& > div {
		width: 100%;
		margin-bottom: 8px;

		&.JsonTextA05_A01,
		&.JsonTextA05_A02 {
			display: flex;
			align-items: center;
			justify-content: center;

			&.JsonTextA05_A01 {
				flex: 450;
			}

			&.JsonTextA05_A02 {
				flex: 369;

				& > div:first-child {
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;

					& > div {
						height: 100%;

						&:first-child {
							flex: 2;
							overflow: hidden;
						}

						&:last-child {
							flex: 1;
							padding: 32px 0;
							display: flex;
							align-items: flex-start;
							justify-content: space-evenly;
							flex-direction: column;

							& > div {
								display: flex;
								align-items: center;
								justify-content: flex-start;
								font-family: MicrosoftYaHei, MicrosoftYaHei;
								font-weight: bold;
								font-size: 14px;
								color: #ffffff;

								& > div:first-child {
									width: 54px;
									height: 14px;
									background: #97fff6;
									border-radius: 7px 7px 7px 7px;
									margin-right: 8px;
								}
							}
						}
					}
				}
			}

			& > div {
				height: 100%;

				&:first-child {
					flex: 648;
					margin-right: 16px;
				}

				&.Template {
					flex: 459;
					border-radius: 6px;
					border: 1px solid #066078;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					& > div {
						width: 100%;
						padding: 16px;

						&.Template_active {
							display: flex;
							align-items: center;
							justify-content: center;

							& > div {
								flex: 1;
								height: 38px;
								border-radius: 6px 6px 6px 6px;
								border: 1px solid #7ad3d7;
								display: flex;
								align-items: center;
								justify-content: center;
								margin: 0 4px;
								font-family: MicrosoftYaHei, MicrosoftYaHei;
								font-weight: bold;
								font-size: 14px;
								color: #ffffff;
								cursor: pointer;

								&.active {
									border: 1px solid #ffeb64;
									background: linear-gradient(
										0deg,
										rgba(221, 109, 48, 1),
										rgba(18, 39, 59, 1)
									);
								}
							}
						}

						&.Template_data {
							flex: 1;
							background: rgba(6, 96, 120, 0.2);
							border-radius: 6px;
							display: flex;
							align-items: center;
							justify-content: space-evenly;
							flex-direction: column;
							padding: 16px 32px;

							& > div {
								width: 100%;
								display: flex;
								align-items: center;
								justify-content: flex-start;

								& > img {
									width: 26px;
									height: 26px;
									margin-right: 8px;
								}

								& > div:nth-child(2) {
									width: 80px;
									font-family: MicrosoftYaHei, MicrosoftYaHei;
									font-weight: bold;
									font-size: 14px;
									color: #ffffff;
									margin-right: 8px;
									text-align: right;
								}

								& > div:nth-child(3) {
									font-family: MicrosoftYaHei, MicrosoftYaHei;
									font-weight: bold;
									font-size: 14px;
									color: #ffffff;
									flex: 1;
								}
							}
						}
					}
				}
			}
		}
	}
}
